<template>
  <div class="container">
    <div class="left">
      <div v-for="(catagory,index) in formItemList">
        <div class="header">
          {{catagory.title}}
        </div>
        <div>
          <Draggable
            :group="{ name:'widget', pull:'clone', put:false }"
            :swapThreshold="1"
            :clone="cloneData"
            :sort="false"
            class="widget-form-list"
            ghostClass="ghost"
            v-model="catagory.list"
            >
             <template v-for="item in catagory.list">
               <div class="form-item">
                  <div class="form-item-element">
                    <i :class="item.icon" />
                    <div class="title" v-text="item.title"></div>
                  </div>
               </div>
             </template>
          </Draggable>
        </div>
      </div>
    </div>
    <div class="middle">
      <div :class="['form-title',{active: configTab == 'form'}]" @click="handleSelectForm">
         {{formData.title}}
      </div>
      <Draggable
        :class="{'widget-empty': formData.list.length === 0}"
        :group="{name:'widget',put:true}"
        :swapThreshold="1"
        @add="handleWidgetAdd"
        @end="dragEnd"
        @start="dragStart"
        class="widget-form-list"
        filter=".disdraggable"
        ghostClass="ghost"
        v-model="formData.list"
        >
         <template v-for="(item,index) in formData.list">
           <div :class="['form-item',{active: selectWg.key == item.key && configTab == 'widget'}]"
             >
              <form-create :rule="objectToArray(item)" :option="formOption"></form-create>
              <div @click="handleSelectWidget(item)" class="form-item-mask">
                <div class="buttons" :style="{display: (selectWg.key == item.key && configTab == 'widget') ? 'block' : ''}">
                  <i class="el-icon-copy-document" style="padding: 5px" @click.stop="handleWidgetCopy(index)"/>
                  <i class="el-icon-delete" style="padding: 5px" @click.stop="handleWidgetDelete(index)"/>
                </div>
              </div>
           </div>
         </template>
      </Draggable>
    </div>
    <div class="right">
      <el-tabs style="height: 100%;overflow: hidden;overflow-y: auto;" :animated="false" v-model="configTab">
        <el-tab-pane label="元素设置" name="widget">
          <div>
            <WidgetConfig></WidgetConfig>
          </div>
        </el-tab-pane>
        <el-tab-pane label="表单设置" name="form">
          <div>
            <PageConfig></PageConfig>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import WidgetConfig from './widget-config'
import PageConfig from './page-config'
import { mapState } from 'vuex';
import FormItemList from './assets/js/widget'
import formCreate from "@form-create/element-ui"

export default{
  name: 'form-create-view',
  components:{
    Draggable,
    WidgetConfig,
    PageConfig,
    'form-create': formCreate.component('form-create')
  },
  computed: {
    ...mapState({
      formData: state => state.formCreate.formData,
      selectWg: state => state.formCreate.selectWg,
      formOption: state => state.formCreate.formOption,
    }),
    configTab: {
      get: function () { return this.$store.state.formCreate.configTab } ,
      set: function (val) {
        this.$store.commit('setConfigTab', val)
      }
    }
  },
  data(){
    return {
      formItemList: FormItemList
    }
  },
  mounted(){

  },
  methods:{
    loadForm(form){
      var data = eval('(' + form.template + ')')
      this.$store.commit('setFormData', data.formData)
      this.$store.commit('setFormOption', data.formOption)
    },
    objectToArray(obj){
      var array = []
      array.push(obj)
      return array
    },
    dragStart(evt) {
      this.$store.commit('setDragWg', this.formData.list[evt.oldIndex])
    },
    dragEnd() {
      this.$store.commit('setDragWg','')
    },
    handleSelectForm() {
      this.$store.commit('setSelectWg', {});
      this.$store.commit('setConfigTab', "form");
    },
    handleSelectWidget(widget) {
      this.$store.commit('setSelectWg', widget);
      this.$store.commit('setConfigTab', "widget");
    },
    handleWidgetAdd(evt) {
      const newIndex = evt.newIndex;
      this.$store.commit('setSelectWg',this.formData.list[newIndex]);
      this.$store.commit('setConfigTab', "widget");
    },
    handleWidgetDelete(index) {
      if(this.formData.list[index].key == this.selectWg.key){
        this.$store.commit('setSelectWg',{});
        this.$store.commit('setConfigTab', "form");
      }
      this.formData.list.splice(index,1)
    },
    handleWidgetCopy(index) {
      this.formData.list.splice(index,0,this.cloneData(this.formData.list[index]))
    },
    cloneData(obj) {
      let start = Date.now()
      const elKey = Date.now()
      let newObj = this.$util.deepClone(obj);
      newObj.key = newObj.type + '_' + elKey;
      newObj.field = newObj.type + '_' + elKey
      newObj.validate = []
      if(!(newObj.col && newObj.col.labelWidth)){
        newObj.col = {}
        newObj.col.labelWidth = this.formOption.form.labelWidth
        newObj.col.labelWidthNum = this.formOption.form.labelWidthNum
      }
      this.$store.commit('setDragWg',newObj);
      let end = Date.now()
      console.log(end - start)
      return newObj;
    }
  }
}
</script>

<style>
.ivu-form-item{
  padding: 5px 0;
  margin-bottom: 0;
}
.ivu-modal-body{
  padding:0px;
}
.ivu-form-item-content{
  margin-right: 20px;
}
</style>
<style lang="less" scoped>

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  color:red;
  height: 100%;
  color:#000000;

  .left::-webkit-scrollbar{
    display:none;
  }

  .left {
    width: 230px;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;

    .header{
      padding: 10px;
      background: #fafafa;
      font-size: 14px;
    }

    .widget-form-list {
      display: flex;
      flex-wrap: wrap;
      padding: 0 10px;
      justify-content: space-between;

      .form-item {
        position: relative;
        cursor: move;
        padding: 6px 5px;
        width: 50%;

        .form-item-element{
          display: flex;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: left;
          height: auto;
          background: #F4F6FC;
          border: 1px dashed #D9D9D9;
          padding: 6px 12px;
          .title{
            padding-left: 5px;
          }
        }

        .form-item-element:hover{
          color: #009AFF;
          background: #FFF;
        }

        .form-item-mask {
          position: absolute;top:0;left:0;right:0;bottom:0;
        }

        .form-item-mask:hover{
          border: 1px solid #348EED;
        }
      }
    }
  }
  /*
   中间的组件放置容器
  */
  .middle::-webkit-scrollbar{
    display:none;
  }
  .middle {
    flex: 1;
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
    border-left: 2px solid #3498db;
    border-right: 2px solid #3498db;

    .form-title{
      position: relative;
      cursor: pointer;
      min-height: 40px;
      border-top: 1px dashed transparent;
      border-bottom: 1px dashed transparent;
      position: relative;
      padding: 5px 15px;
      display: flex;
      align-items: center;
      font-size: 16px;
      background-color: #DFDFDF;
    }

    .form-title.active {
      background-color: rgba(9, 41, 41, 0.05);
      border-left: 5px solid transparent;
      border-color: #4DB8FF;
    }

    .widget-form-list {
      height: 100%;

      .form-item {
        position: relative;
        cursor: pointer;
        min-height: 40px;
        border-top: 1px dashed transparent;
        border-bottom: 1px dashed transparent;
        position: relative;
        padding: 5px 0px;

        &:hover{
          background-color: rgba(0,154,255,0.05);
        }

        &.active {
          background-color: rgba(0,154,255,0.05);
          border-left: 5px solid transparent;
          border-color: #4DB8FF;
        }

        .form-item-mask {
          position: absolute;top:0;left:0;right:0;bottom:0;
          z-index: 2;
          &:hover .buttons{
            display: block;
          }
        }

        .buttons{
          position: absolute;
          right: 0;
          bottom: -10px;
          padding: 0px 5px;
          z-index: 3;
          display: none;

          i:nth-child(1){
            color: #71B300;
            background: #FFF;
            margin-right: 3px;
            border-radius: 3px;

            &:hover{
              background: #71B300;
              color: #FFF;
            }
          }

          i:nth-child(2){
            color: #FF3824;
            background: #FFF;
            border-radius: 3px;
            &:hover{
              background: #FF3824;
              color: #FFF;
            }
          }
        }
      }

      .ghost {
        position: relative;
        height: 50px;
        line-height: 50px;
        overflow: hidden;
        border: 1px dashed #3498db;

        &::after {
          content: '';
          display: block;
          background: #fff;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          text-align: center;
          font-size: 16px;
          color: #999;
          z-index: 10;
        }
      }
    }
    .widget-empty {
      background-image: url('./assets/img/form_empty.png');
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 66%;
      height: 100%;
    }
  }

  .right {
    overflow: hidden;
    width: 250px;
    height: 100%;
    padding: 15px;
  }
}
</style>
